<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@page import="com.xea.service.ProductService"%>
<%@page import="com.xea.service.ServiceFactory"%>
<%@page import="com.xea.service.ProductPathService"%>
<%@page import="com.xea.model.ProductPath"%>
<%@page import="com.xea.model.Product"%>
<%@include file="../../inner/head.jsp"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<link type="text/css" rel="stylesheet" href="${basepath}/res/images/style.css" />
<style type="text/css">
	body {
		margin:0px;
		padding:0px;
		height: 100%;
		width: 100%;
	}
	.detailcon p{
		padding-left: 12px;
	}
</style>
<%
		ProductPathService productpathDao = ServiceFactory.getProductPathService();
  	  	String id=request.getParameter("id");
  	  	List propathlist=productpathDao.searchout(id);%>
<script>
	function showPic(id){
		$("span[name='menu']").each(function() {
    		if($(this).attr("id") == "st"+id) {
	  			$(this).css("font-weight", "bold");
				$(this).css("font-size", "14px"); 
			} else {
	  			$(this).css("font-weight", "");
				$(this).css("font-size", ""); 
			}
		});	
		
		$("div[name='pic']").each(function() {
    		if($(this).attr("id") == "pic"+id) {
	  			$(this).css("display", "block"); 
			} else {
	  			$(this).css("display", "none"); 
			}
		});	
	}
	
	function prePic(){
		if(parseInt($("#pageNo").val())==0)
			return false
		else{
			showPic(parseInt($("#pageNo").val())-1);
			$("#pageNo").val(parseInt($("#pageNo").val())-1);
		}
	}
	
	function nextPic(){
		if(parseInt($("#pageNo").val())==<%=propathlist.size()-1%>)
			return false
		else{
			showPic(parseInt($("#pageNo").val())+1);
			$("#pageNo").val(parseInt($("#pageNo").val())+1);
		}
	}
	
	function gotoPic(id){
		showPic(id);
		$("#pageNo").val(id);
	}
	
	function firstPic(id){
		showPic(id);
		$("#pageNo").val(id);
	}
	
	function lastPic(id){
		showPic(id);
		$("#pageNo").val(id);
	}
	
	$(document).ready(function() {
		if(<%=propathlist.size()-1%>>1)
			showPic(0);
  	});
</script>
<body>
  	<div id="list_r">
  	  <%
  	  	for(int i=0;i<propathlist.size();i++){
  	  		ProductPath propath=(ProductPath)propathlist.get(i);
			if(i==0){%>
		 <div  name="pic" id="pic<%=i%>" class="bigpic"><img src="<%=propath.getMiddlePath() %>" alt="<%=propath.getPicName() %>" style="padding-top: 40px;padding-bottom: 40px;cursor: pointer;" title="<%=propath.getPicName() %>"/></div>
		<%}else {%>
		  <div name="pic" id="pic<%=i%>" class="bigpic" style="display: none;"><img src="<%=propath.getMiddlePath() %>" alt="<%=propath.getPicName() %>" style="padding-top: 40px;padding-bottom: 40px;cursor: pointer;" title="<%=propath.getPicName() %>"/></div>
		<%}} %>
	  <%if (propathlist.size()>1){ %>
	  	<div class="pagination2" style="font-weight: normal;">
		  <span onclick="javascript:firstPic(0);"  style="cursor: pointer;font-weight: bold;">&lt;&lt;</span>&nbsp;
		  <span onclick="javascript:prePic();"  style="cursor: pointer;font-weight: bold;">Previous</span>&nbsp;
		  <% int j;
		  	for(j=0;j<propathlist.size();j++){ %>
		  	  <span name="menu" onclick="javascript:gotoPic(<%=j %>);"style="cursor: pointer;" id="st<%=j %>"><%=j+1%></span>&nbsp;&nbsp;
		  	<%} %>
		  	<input id="pageNo" name="pageNo" type="hidden" value="0"/>
		  <span onclick="javascript:nextPic();"  style="cursor: pointer;font-weight: bold;">Next&nbsp;</span>
		  <span onclick="javascript:lastPic(<%=j-1%>);"  style="cursor: pointer;font-weight: bold;">&gt;&gt;</span>
		</div>
	  <%} %>
	  <div id="detail">
	  	<%
		ProductService productDao = ServiceFactory.getProductService();
  	  	Product product=productDao.findById(Integer.valueOf(id));%>
		<p class="tit"><%=product.getName()%></p>
		<span class="detailcon"><%=product.getDescribes()%></span>
		<p></p><p></p>
		<p class="tit2">Additional Information</p>
		<%if (product.getVolume()!=""){%>
		<p class="pad12">
		  <span class="tb">Sofa with Storage:</span>
		  <%=product.getVolume()%>
		</p><%} %>
		<%if (product.getMaterial()!=""){%>
		<p class="pad12"><span class="tb">Material:</span>&nbsp;&nbsp;<%=product.getMaterial()%></p>
	 	<%} %>
	  </div>		
	</div>
</body>
